<template>
	<div class="card">
		<div class="card-title">
			<span>
				<slot name="title">{{title}}</slot>
			</span>
			<div class="card-slot" v-if="$slots.right">
				<slot name="right"></slot>
			</div>
		</div>
		<div class="card-content">
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		title: {
			type: String
		}
	},
	data() {
		return {}
	},
	methods: {}
}
</script>
<style lang="scss" scoped>
.card {
	@include box-shabow;
	background-color: #fff;
	border-radius: $border-radius;
	display: flex;
	flex-direction: column;
	&-title {
		border-bottom: 1px solid $color-border-theme;
		padding: 10px 20px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&::before {
			content: '';
			width: 2px;
			height: 16px;
			background-color: $color-theme;
			display: block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		.card-slot {
			float: right;
		}
	}
	&-content {
		padding: $padding;
		flex: 1;
		height: 0;
		overflow-y: auto;
	}
}
.card + .card {
	margin-top: $margin;
}
</style>
